<template>
  <div class="dashboard-container transport-task customer-list-box">
    <div class="app-container">
      <el-card class="search-card-box">
        <el-form
          ref="searchForm"
          label-width="80px"
        >
          <el-row :gutter="60">
            <el-col :span="8">
              <el-form-item
                label="车辆类型"
                style="margin-bottom: 0px"
              >
                <el-select
                  v-model="truckTypeId"
                  placeholder="请选择"
                >
                  <el-option
                    v-for="item in vehicleInfoList"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item
                label="车牌号码"
                style="margin-bottom: 0px"
              >
                <el-input
                  v-model="licensePlate"
                  placeholder="请输入"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-button
                type="warning"
                @click="onSearch"
              >搜索</el-button>
              <el-button @click="onReset">重置</el-button>
            </el-col>
          </el-row>
        </el-form>
      </el-card>

      <TabChange
        :default-active-index="showStatus"
        :setting-list="[
          {
            value: 0,
            label: '全部',
            num: countThree
          },
          {
            value: 1,
            label: '可用',
            num: countOne
          },
          {
            value: 2,
            label: '停用',
            num: countTwo
          }
        ]"
        @tabChange="tabChange"
      ></TabChange>

      <div style="margin-top: 20px">
        <el-card class="table-card-box">
          <el-button
            type="warning"
            style="margin-bottom:10px"
            @click="isShowAddDialog"
          >新增车辆</el-button>
          <el-table
            ref="multipleTable"
            :data="dataList"
            style="width: 100%"
          >
            <el-table-column
              align="center"
              type="index"
              label="序号"
              width="60"
            >
              <template slot-scope="scope">
                <span>{{
                  scope.$index +
                    (page - 1) * pageSize +
                    1
                }}</span>
              </template>
            </el-table-column>
            <el-table-column
              align="center"
              type="index"
              label="车牌号码"
              width="180"
            >
              <template slot-scope="scope">
                <span>
                  {{ scope.row.licensePlate }}
                </span>
              </template>
            </el-table-column>
            <el-table-column
              align="center"
              type="index"
              label="车牌类型"
              width="180"
            >
              <template slot-scope="scope">
                <span>
                  {{ scope.row.truckTypeName }}
                </span>
              </template>
            </el-table-column>
            <el-table-column
              align="center"
              type="index"
              label="司机数量"
              width="140"
            >
              <template slot-scope="scope">
                <span>
                  {{ scope.row.driverNum }}
                </span>
              </template>
            </el-table-column>
            <el-table-column
              align="center"
              type="index"
              label="车辆状态"
              width="200"
            >
              <template slot-scope="scope">
                <div
                  class="carStatus"
                  style="width: 100%; "
                >
                  <span
                    class="tableColumn-status"
                    :class="{ 'stop-use': String(scope.row.workStatus) === '0' }"
                  > </span>
                  <span>
                    {{ scope.row.workStatus === 1 ? '可用' : '停用' }}
                  </span>
                </div>
              </template>
            </el-table-column>
            <el-table-column
              align="center"
              type="index"
              label="GPS设备ID"
              width="180"
            >
              <template slot-scope="scope">
                <span>
                  {{ scope.row.deviceGpsId }}
                </span>
              </template>
            </el-table-column>
            <el-table-column
              align="center"
              type="index"
              label="实载重量(T)"
              width="140"
            >
              <template slot-scope="scope">
                <span>
                  {{ scope.row.allowableLoad }}
                </span>
              </template>
            </el-table-column>
            <el-table-column
              align="center"
              type="index"
              label="实载体积(方)"
              width="140"
            >
              <template slot-scope="scope">
                <span>
                  {{ scope.row.allowableVolume }}
                </span>
              </template>
            </el-table-column>
            <el-table-column
              align="center"
              type="index"
              label="操作"
              width="300"
            >
              <template slot-scope="scope">
                <el-link
                  type="primary"
                  @click="handleTransportDetail(scope.row.id)"
                >查看详情</el-link>
                <el-divider direction="vertical" />
                <el-link
                  :type="(scope.row.workStatus===1)?'danger':'primary'"
                  @click="handleTransportCancel(scope.row)"
                >
                  {{ scope.row.workStatus===1 ? '停用' :'启用' }}
                </el-link>
                <el-divider direction="vertical" />
                <el-link
                  type="primary"
                  @click="handleTransportDispatchCar(scope.row)"
                >配置司机</el-link>
              </template>
            </el-table-column>
          </el-table>

          <!-- 分页 -->
          <div class="block">
            <el-pagination
              :page-sizes="[10, 20, 30, 40]"
              :page-size="100"
              layout="total, sizes, prev, pager, next, jumper"
              :total="counts"
              style="margin-bottom:30px"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
            >
            </el-pagination>
          </div>
        </el-card>
      </div>

      <addDialog
        :dialog-form-visible.sync="dialogFormVisible"
        :vehicle-info-list="vehicleInfoList"
        @updateList="getTruckTypePage"
      />

      <workStatusDialog
        :dialog-visible.sync="dialogVisible"
        :row="row"
        @update="getTruckTypePage"
      />
    </div>
  </div>
</template>

<script>
import addDialog from './components/add-dialog.vue'
import workStatusDialog from './components/workStatus-dialog.vue'
import { getCarTypeList, getCarTypeStatics, list } from '@/api/transit'
import TabChange from '@/components/TabChange'
export default {
  name: 'Vehicle',
  components: {
    TabChange,
    addDialog,
    workStatusDialog
  },
  data() {
    return {
      vehicleInfoList: [], // 车辆类型下拉数据
      countOne: '', // 可用
      countTwo: '', // 停用
      countThree: '', // 可用
      showStatus: 0,
      dataList: [], // 表格数据 车辆详情
      truckTypeId: '',
      page: 1,
      pageSize: 10,
      counts: 0,
      licensePlate: '', // 车牌号码
      activeIndex: 0, // 全部0 可用1 停用2
      dialogFormVisible: false,
      dialogVisible: false,
      row: {}
    }
  },
  async created() {
    // 获取车辆类型下拉
    await this.getGetCarTypeList()
    // 获取车辆类型分页数据
    await this.getTruckTypePage()
    // 获取统计车辆详情
    await this.getGetCarTypeStatics()
  },
  methods: {
    // 获取车辆类型下拉
    async getGetCarTypeList() {
      const res = await getCarTypeList()
      this.vehicleInfoList = res.data
    },
    // 统计车辆
    async getGetCarTypeStatics() {
      const res = await getCarTypeStatics()
      this.countTwo = res.data['0']
      this.countOne = res.data['1']
    },
    // 获取车辆类型分页数据
    async getTruckTypePage() {
      try {
        // 全部
        if (this.activeIndex === 0) {
          const res = await list({ page: this.page, pageSize: this.pageSize })
          this.dataList = res.data.items
          this.countThree = +res.data.counts
          this.counts = +res.data.counts
        }
        // 可用
        if (this.activeIndex === 1) {
          const res = await list({ page: this.page, pageSize: this.pageSize, workStatus: 1 })
          this.dataList = res.data.items
          this.countOne = +res.data.counts
          this.counts = +res.data.counts
        }
        // 停用
        if (this.activeIndex === 2) {
          const res = await list({ page: this.page, pageSize: this.pageSize, workStatus: 0 })
          this.dataList = res.data.items
          this.countTwo = +res.data.counts
          this.counts = +res.data.counts
        }
      } catch (error) {
        console.log(error)
      }
    },
    // 处理页码大小
    async handleSizeChange(val) {
      this.pageSize = val
      await this.getTruckTypePage()
    },
    // 当前页变动时候触发的事件
    async handleCurrentChange(val) {
      this.page = val
      await this.getTruckTypePage()
    },
    handleTransportDetail(id) {
      this.$router.push({
        path: '/transit/vehicle-detail',
        query: {
          id
        }
      })
    },
    // 启用/停用
    handleTransportCancel(row) {
      this.row = row
      this.dialogVisible = true
    },
    handleTransportDispatchCar(id) {
      console.log(id)
    },
    // 车辆搜索
    async onSearch() {
      try {
        const res = await list({ page: this.page, pageSize: this.pageSize, licensePlate: this.licensePlate, truckTypeId: this.truckTypeId })
        this.dataList = res.data.items
        this.counts = +res.data.counts
        this.$message.success('搜索成功')
      } catch (error) {
        console.log(error)
      }
    },
    async tabChange(activeIndex) {
      // 全部
      if (activeIndex === 0) {
        this.activeIndex = activeIndex
        this.getTruckTypePage()
      }
      // 启用
      if (activeIndex === 1) {
        this.activeIndex = activeIndex
        // this.getGetCarWorkingTrucks()
        this.getTruckTypePage()
      }
      // 停用
      if (activeIndex === 2) {
        this.activeIndex = activeIndex
        this.getTruckTypePage()
      }
    },
    // 控制addDialog显示隐藏
    isShowAddDialog() {
      this.dialogFormVisible = true
    },
    // 重置
    onReset() {
      this.truckTypeId = ''
      this.licensePlate = ''
    }
  }
}
</script>

<style lang="scss" scoped>
.carStatus {
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>
